<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        name:{{name}}
        <input type="text" v-model="name"> <button @click="add">添加</button>
        <table class="table table-bordered">
            <thead>
                <td>id</td>
                <td>书名</td>
                <td>添加时间</td>
                <td>操作</td>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td> <button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
          </table>
    </div>
</body>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[
                // {
                // name:"三国演义",
                // time:"2022-1-1"
                // },
                // {
                // name:"三国演义",
                // time:"2022-1-1"
                // }

        ],
        name:""
        },
        methods:{
            reset(){
                this.name = ""
            },
            add(){
                this.arr.push({
                    name:this.name,
                    time: new Date().toLocaleDateString() + " " + new Date().toLocaleTimeString()
                })
                this.reset()
            },
            del(index){
                this.arr.splice(index,1)
            }
        }
    })
</script>
</html>